import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { getComponentById, useComponentsStore, ComponentUnitType } from "@/stores/edit-pages-store";
import { updatePosition, EditPositionType } from "../commonMethods";
import { Divider, Popconfirm, Space } from "antd";
import { ClearOutlined } from "@ant-design/icons";
import { useComponentConfigStore, getComponentConfByName, ComponentConfig } from "@/stores/low-editor-comps-conf";

interface HoverMaskProps {
  portalWrapperClassName: string;
  containerClassName: string;
  componentId: string;
  componentUnitType?: ComponentUnitType;
}

function HoverMask({ containerClassName, componentId, portalWrapperClassName,componentUnitType }: HoverMaskProps) {
  const [position, setPosition] = useState({
    left: 0,
    top: 0,
    width: 0,
    height: 0,
    labelTop: 0,
    labelLeft: 0,
  });
 
  const [editPosition, setEditPosition] = useState<EditPositionType>(null);
  const { schema, popEditing, clearComponentSubitems } = useComponentsStore();

  const curComponent = useMemo(() => {
    return getComponentById(componentId, schema);
  }, [componentId]);

  const { componentConfig } = useComponentConfigStore();
  const componentConf = getComponentConfByName(curComponent?.name, componentConfig) as ComponentConfig

  useEffect(() => {
    updatePosition({componentId, curComponent, containerClassName, curComponentUnitType: componentUnitType, schema, popEditing, setEditPosition, setPosition, componentConf});
  }, [componentId, schema, componentUnitType]);

  const el = useMemo(() => {
    return document.querySelector(`.${portalWrapperClassName}`)!;
  }, []);

  // const [changePin, setChangePin] = useState(0)
  // const clearRegion = useMemo(()=>{
  //   const type = componentUnitType || (componentConf.defaultEditRegion ?? "children")
  //   return curComponent?.[type] || []
  // },[curComponent,componentUnitType,changePin])

  // function handleClearChildren() {
  //   const type = componentUnitType || (componentConf.defaultEditRegion ?? "children")
  //   clearComponentSubitems(componentId, type);
  //   setChangePin(new Date().getTime())
  // }
  if (!curComponent) return null;

  // if(curComponent && curComponent.name === 'Page'){
  //   return null
  // }
  
  return createPortal(
    <>
      <div
        className="hoverMaskOuterContainer"
        style={{
          position: "absolute",
          left: position.left,
          top: position.top,
          backgroundColor: "rgba(0, 0, 255, 0.02)",
          pointerEvents: "none",
          width: position.width,
          height: position.height,
          zIndex: 12,
          boxSizing: "border-box",
        }}
      >
        {!!editPosition &&(
          <div
            className="maskInnerRegion"
            style={{
              borderColor: "rgba(0, 0, 255, 0.05)",
              borderWidth: editPosition.borderWidth,
              borderStyle: "solid",
              pointerEvents: "none",
              width: position.width,
              height: "100%",
            }}
          >
            {/* { clearRegion.length>0 && <Space
              split={
                <Divider
                  type="vertical"
                  style={{ borderInlineStart: "1px solid #fff", opacity: 0.4, marginInline: "4px" }}
                />
              }
              size={2}
              className="bg-blue-600 text-xs h-[18px] px-2 text-white rounded-b"
              style={{
                position: "absolute",
                left: "50%",
                top: 0,
                fontSize: "12px",
                pointerEvents: "auto",
                transform: "translateX(-50%)",
              }}
            >
                <Popconfirm title="确认清空？" okText={"确认"} cancelText={"取消"} onConfirm={handleClearChildren}>
                  <ClearOutlined className="selectToolIcon" />
                </Popconfirm>
            </Space>} */}
          </div>
        )}
      </div>
    </>,
    el
  );
}

export default HoverMask;
